@charset "utf-8";
//不会被编译的sass的注释

/*属于css的注释是会被编译出来的


*/
//变量 可以存css单位、颜色、文字
$width:300px;
$height:200px;
$bgc:yellowgreen pink;//多值变量
$fontSize:23px;
$color:#fff;
$ms:"Microsoft YaHei";
body{
  $width:100px;
  width: $width;
  height: $height;
  background-color: nth($bgc,2);
  /*background-color: nth(哪个变量，第几个); sass 里有 less里没有*/
  border: solid 30px red;
font-family: $ms;

}
/*嵌套*/
.list{
  $lh:36px;
  li{
     font-size: $lh;
  }
  a{
    float: left;
  }
  span{
    float: right;
    width: 12px;
    height: 12px;
    background-color: yellow;
    margin-top: ($lh - 12) / 2;/*要注意空格*/
  }
}

/*属性嵌套*/
.box{
  //复合样式
  font:{
     style:normal;
     weight: bold;
     size:14px;
     family: $ms;
  }
}

.news{
  /*@at-root 跳出上一层*/
  @at-root .news_title{
    width: 10px;
  }
  @at-root .news_content{
    width: 20px;
  }
  /*或者@at-root{
    .news_title{
      width:10px
    }
    .abc{
      width:10px;
    }
  }*/
}
/*跳出*/
.box{
   width: 200px;
   &_cont{
      width: 400px;
      &_abc{
        width: 200px;
      }
   }
}

//混合 @mixin 声明
/**
 @mixin opa() 不写参数  直接可以调用
 @mixin opa($opa) 调用时候 必须传参数
 @mixin opa($opa:40)
 @mixin shadow($shadow...) 参数不确定
 */

@mixin opa($opa){
    opacity: $opa/100;
    filter:alpha(opacity=$opa);
}

/*多个参数选填*/
@mixin shadow($shadow...){
   box-shadow:$shadow;
}

@mixin sj($fx:top,$size:10px,$color:red){
   @if ($fx==top){
      border-color: transparent transparent $color transparent;
      border-style: dashed dashed  solid dashed;
   }
   @else if($fx==right){
     border-color: transparent transparent  transparent $color;
     border-style: dashed dashed   dashed solid;
   }
   @else if($fx==bottom){
     border-color: $color transparent transparent  transparent ;
     border-style:solid  dashed dashed  dashed;
   }
  @else if($fx==left){
     border-color: transparent $color transparent  transparent ;
     border-style: solid dashed dashed   dashed ;
   }
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: $size;
}
/*
设置默认值
@mixin opa($opa:50){
  opacity: $opa/100;
  filter:alpha(opacity=$opa);
}*/

/*混全*/
.demo1{
  @include sj($fx:bottom,$color:yellowgreen)
   /*  @include opa(50);
     @include shadow(0 0 10px red ,0 0 20px yellow)*/
}
.fl{
  float: left;
}

/*继承*/
.box{
   @extend .fl;
}

.box2{
  @extend .box
}
/*占位选择器 （在用到的时候  才会被编译出来）*/
%clearfix{
  *zoom:1;
  &:after,
  &:before{
    content: "";
    display: table;

  }
   &:after{
     clear: both;
   }
}

.abc{
   width: 300px;
   @extend %clearfix;
}

/*
#####################################
7、字符串插值

*/

$icon:'../images/icon/';
$img:'../images/';

/*语法  #{变量名}*/
.content{
   background: url(#{$icon}a.jpg) left top no-repeat;
}

/*sass 中的运算   运算符 必须要有空格*/
.ys{
   color:#F00 + 100;
   $fs:12px;
   $lh:24px;
   font:#{$fs}/#{$lh}"Microsoft YaHei","微软雅黑";
}

// js 的 for(var i=0;i<aaa.length;i++){}

//sass  的循环

@for $i from 1 through 10{
    .item_#{$i}{
        width:10px * $i;
      background-position: ($i - 1) * 20px 0;
      }
}

@for $i from 1 to 10{
  .demo_#{$i}{
    width:10px * $i;
    background-position: ($i - 1) * 20px 0;
  }
}
/*@while*/
$a:5;
@while($a >= 1){
   .aaa_#{$a}{
     width:20px * $a;
   }
   $a:$a - 1;
}

/*
 ######################
@each*/
$icon_name:user,pass,checked,select;
@each $i in $icon_name{
   .icon_#{$i}{
     width: 10px;
   }
}
/*#########################
  三目 运算
   sass 中的其他内容
   if($condition,$if true,$if false)
     sass 中的三目判断
     if(true,1px,2px)=>1px
     if(false,1px,2px)=>2px
*/
